// index/shop-canvas/canvas.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    shopData: {
      type: Object,
      value: {}
    },
    renderCanvas: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    footerImgHeight: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 获取canvas实例和画笔
    getMyCanvasAndCtx() {
      return new Promise((resolve, reject) => {
        const query = wx.createSelectorQuery().in(this)
        query.select('#myCanvas')
          .fields({
            node: true,
            size: true
          })
          .exec((res) => {
            console.log(res, "Redfsdff");
            const width = res[0].width;
            const height = res[0].height;
            const canvas = res[0].node
            const ctx = canvas.getContext('2d')
            const dpr = wx.getSystemInfoSync().pixelRatio;
            //新接口需显示设置画布宽高；
            canvas.width = width * dpr
            canvas.height = height * dpr
            ctx.scale(dpr, dpr);
            this.setData({
              canvas: canvas,
              ctx: ctx,
              dpr: dpr
            }, () => {
              resolve({
                canvas,
                ctx
              })
            })
          })
      })
    },
    //绘制图片的方法
    drawImageMethod({
      imgUrl,
      x,
      y,
      imgWidth,
      imgHeight
    }) {
      return new Promise(resolve => {
        //绘制头像
        const img = this.data.canvas.createImage();
        img.src = imgUrl;
        img.onload = () => {
          this.data.ctx.save(); // 保存的绘图上下文
          this.data.ctx.beginPath(); //开始绘制
          this.data.ctx.drawImage(img, x, y, imgWidth, imgHeight);
          this.data.ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图问下文即状态 还可以继续绘制
          resolve()
        };
      })
    },
    // 绘制有圆角的图片
    drawRoundImage({
      imgUrl,
      x,
      y,
      imgWidth,
      imgHeight,
      bg_r,
      cutImgFlag = false, //是否需要剪切图片
      cutObjParams
    }) {
      // bg_r 图片圆角
      return new Promise(resolve => {
        //绘制头像
        const img = this.data.canvas.createImage();
        img.src = imgUrl;
        img.onload = () => {
          this.data.ctx.save();
          this.data.ctx.beginPath(); //开始绘制
          // 绘制圆角
          this.data.ctx.arc(x + bg_r, y + bg_r, bg_r, Math.PI, Math.PI * 1.5)
          this.data.ctx.arc(x + imgWidth - bg_r, y + bg_r, bg_r, Math.PI * 1.5, Math.PI * 2)
          this.data.ctx.arc(x + imgWidth - bg_r, y + imgHeight - bg_r, bg_r, 0, Math.PI * 0.5)
          this.data.ctx.arc(x + bg_r, y + imgHeight - bg_r, bg_r, Math.PI * 0.5, Math.PI)
          this.data.ctx.clip();
          if (!cutImgFlag) {
            this.data.ctx.drawImage(img, x, y, imgWidth, imgHeight); //绘制图像到画布
          } else {
            this.data.ctx.drawImage(img, cutObjParams.sx, cutObjParams.sy, cutObjParams.swidth, cutObjParams.sheight, x, y, cutObjParams.width, cutObjParams.height);
            // img	规定要使用的图像、画布或视频。
            // sx	可选。开始剪切的 x 坐标位置。
            // sy	可选。开始剪切的 y 坐标位置。
            // swidth	可选。被剪切图像的宽度。
            // sheight	可选。被剪切图像的高度。
            // x	在画布上放置图像的 x 坐标位置。
            // y	在画布上放置图像的 y 坐标位置。
            // width	可选。要使用的图像的宽度。（伸展或缩小图像）
            // height	可选。要使用的图像的高度。（伸展或缩小图像）
          }
          this.data.ctx.restore();
          resolve();
        };
      })
    },
    // 绘制有圆角的矩形框
    roundRect({
      x,
      y,
      w,
      h,
      r,
      color
    }) {
      /**
       * 
       * @param {CanvasContext} ctx canvas上下文
       * @param {number} x 圆角矩形选区的左上角 x坐标
       * @param {number} y 圆角矩形选区的左上角 y坐标
       * @param {number} w 圆角矩形选区的宽度
       * @param {number} h 圆角矩形选区的高度
       * @param {number} r 圆角的半径
       */
      // 开始绘制
      this.data.ctx.save();
      this.data.ctx.beginPath();
      // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
      // 这里是使用 fill 还是 stroke都可以，二选一即可
      this.data.ctx.fillStyle = color;
      // ctx.setFillStyle('transparent')
      // ctx.setStrokeStyle('transparent')
      // 左上角绘制左上角圆弧
      this.data.ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
      // border-top
      this.data.ctx.moveTo(x + r, y)
      this.data.ctx.lineTo(x + w - r, y)
      this.data.ctx.lineTo(x + w, y + r);
      // 右上角
      this.data.ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
      // border-right
      this.data.ctx.lineTo(x + w, y + h - r)
      this.data.ctx.lineTo(x + w - r, y + h)
      // 右下角
      this.data.ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
      // border-bottom
      this.data.ctx.lineTo(x + r, y + h)
      this.data.ctx.lineTo(x, y + h - r)
      // 左下角
      this.data.ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
      // border-left
      this.data.ctx.lineTo(x, y + r)
      this.data.ctx.lineTo(x + r, y)
      this.data.ctx.closePath()
      // 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
      this.data.ctx.fill()
      // 剪切
      this.data.ctx.clip()
      // 从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。可以在使用 clip 方法前通过使用 save 方法对当前画布区域进行保存，并在以后的任意时间通过restore方法对其进行恢复。
      // restore 进行恢复，使其能够访问画布上的其他区域
      this.data.ctx.restore()
    },
    // 计算多个带有圆角的 文字 w文字的宽度， h高度===> x,y坐标值
    drawMultipleArcTo({
      startX,
      startY,
      w,
      h,
      color,
      maxWidth,
      initStartX,
      marginRight = 10,
      marginBottom = 10
    }) {
      let x = parseFloat(startX + '')
      let y = parseFloat(startY + '')
      let endX = x + w + 2 * h + marginRight
      let contentHeight
      if (endX > maxWidth) { //判断何时进行换行maxWidth进行换行展示
        y += 2 * h + marginBottom
        x = initStartX // 换行进行初始化canvas--x坐标---initStartX
        endX = x + w + 2 * h + marginRight
        row = row + 1;
      }
      startX = endX
      startY = y
      this.data.ctx.beginPath()
      this.data.ctx.moveTo(x + h, y) // 创建开始点
      this.data.ctx.lineTo(x + w + h, y) // 创建水平线
      this.data.ctx.arcTo(x + w + 2 * h, y, x + w + 2 * h, y + h, h) // 创建弧
      this.data.ctx.arcTo(x + w + 2 * h, y + (2 * h), x + w, y + (2 * h), h)
      this.data.ctx.lineTo(x + h, y + (2 * h))
      this.data.ctx.arcTo(x, y + (2 * h), x, y + h, h)
      this.data.ctx.arcTo(x, y, x + h, y, h)
      this.data.ctx.fillStyle = color
      this.data.ctx.fill()
      return [x + h, y + h, startX, startY]
    },
    //计算个带有圆角的文字   w文字的宽度， r行高    (x,y坐标)  ====>返回带有圆角的  x,y坐标值
    drawSingleArcText({
      x,
      y,
      w,
      r,
      color
    }) {
      this.data.ctx.beginPath()
      this.data.ctx.moveTo(x + r, y) // 创建开始点
      this.data.ctx.lineTo(x + w + r, y) // 创建水平线
      this.data.ctx.arcTo(x + w + 2 * r, y, x + w + 2 * r, y + r, r) // 创建弧
      this.data.ctx.arcTo(x + w + 2 * r, y + (2 * r), x + w, y + (2 * r), r)
      this.data.ctx.lineTo(x + r, y + (2 * r))
      this.data.ctx.arcTo(x, y + (2 * r), x, y + r, r)
      this.data.ctx.arcTo(x, y, x + r, y, r)
      this.data.ctx.fillStyle = color
      this.data.ctx.fill()
      return [x + r, y + r]
    },
    // 根据图片原始宽和高的比例 计算图片在当前画布中的高度--保证图片不变形
    // preWidth 图片原始宽度
    // preHeight 图片原始高度
    // nowWidth 图片在画布中的宽度
    // return  nowHeight 图片在画布中的高度
    baseCanvasImgHeight(preWidth, preHeight, nowWidth) {
      return preHeight * nowWidth / preWidth
    },
    // 逐行绘制文字，超出显示省略号
    //处理文字多出省略号显示
    dealWords({
      font,
      color,
      x,
      y,
      word,
      maxWidth,
      maxLine,
      lineHeight
    }) {
      this.data.ctx.beginPath();
      this.data.ctx.font = font; //设置字体样式
      this.data.ctx.fillStyle = color; //设置字体颜色
      var allRow = Math.ceil(this.computeTextWidth(word) / maxWidth); //实际总共能分多少行
      var count = allRow >= maxLine ? maxLine : allRow; //实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数
      var endPos = 0; //当前字符串的截断点
      for (var j = 0; j < count; j++) {
        var nowStr = word.slice(endPos); //当前剩余的字符串
        var rowWid = 0; //每一行当前宽度    
        if (this.computeTextWidth(nowStr) > maxWidth) { //如果当前的字符串宽度大于最大宽度，然后开始截取
          for (var m = 0; m < nowStr.length; m++) {
            rowWid += this.computeTextWidth(nowStr[m]); //当前字符串总宽度
            if (rowWid > maxWidth) {
              if (j === maxLine - 1) { //如果是最后一行
                this.data.ctx.fillText(nowStr.slice(0, m - 1) + '...', x, y + (j + 1) * lineHeight); //(j+1)*lineHeight这是每一行的高度(行高)      
              } else {
                this.data.ctx.fillText(nowStr.slice(0, m), x, y + (j + 1) * lineHeight);
              }
              endPos += m; //下次截断点
              break;
            }
          }
        } else { //如果当前的字符串宽度小于最大宽度就直接输出
          this.data.ctx.fillText(nowStr.slice(0), x, y + (j + 1) * lineHeight); // (j+1)*18这是每一行的高度(行高)
        }
      }
    },
    // 计算文字的宽度
    computeTextWidth(text) {
      return this.data.ctx.measureText(text).width
    },
    // startX 开始坐标  startY结束坐标 
    drawMultipleBaseBackRect({
      startX,
      startY,
      word,
      wordFont,
      wordColor,
      fillColor,
      maxWidth,
      initStartX,
      lineHeight,
      height,
      padding,
      marginRight = 10,
      marginBottom = 10
    }) {
      var row; //行数
      row = 1; // 默认第一行
      //绘制文字
      this.data.ctx.font = wordFont;
      let x = parseFloat(startX + '')
      let y = parseFloat(startY + '')
      let w = this.data.ctx.measureText(word).width + padding[1] + padding[3];
      let h = height + padding[0] + padding[2]; //14是行高 2  padding值
      let endX = x + w + marginRight
      if (endX > maxWidth) { //判断何时进行换行maxWidth进行换行展示
        y += h + marginBottom
        x = initStartX // 换行进行初始化canvas--x坐标---initStartX
        endX = x + w + marginRight;
        row = row + 1;
      }
      startX = endX
      startY = y
      // 开始绘制--矩形
      this.data.ctx.save();
      this.data.ctx.beginPath();
      this.data.ctx.fillStyle = fillColor;
      this.data.ctx.rect(x, y, w, h); //14是行高 2padding值
      this.data.ctx.fill();
      this.data.ctx.fillStyle = wordColor;
      this.data.ctx.textBaseline = "top";
      this.data.ctx.fillText(word, x + (w - this.computeTextWidth(word)) / 2, y + Math.ceil(padding[0] + padding[2]) / 2)
      return [x + w + marginRight, y + h, startX, startY, row == 1 ? h : h * row + marginBottom]
      // 1第一位表示当前渲染过后的元素所在canvas下的x坐标值
      //2 -第二个表示渲染过后当前元素所在canvas下的y轴的坐标位置值  
      // 3第三个参数是用于累加计算下一个元素（在canvas中）的x轴坐标 
      // 4第四个值用于累加计算下一个元素（在canvas中）的y轴坐标值 
      // 5 第五个参数是渲染过后这区域的重的高度值
    },
    /**
     * canvas绘制换行文字----无省略号
     *  @param
     *  ctx：canvas的 2d 对象
     *  t：绘制的文字
     *  x,y:文字坐标
     *  w：文字最大宽度
     */
    drawtext({
      t,
      x,
      y,
      w,
      font,
      color,
      textHeight,
      marginBottom
    }) {
      this.data.ctx.font = font;
      this.data.ctx.fillStyle = color;
      const chr = t.split('');
      let temp = '';
      let row = [];
      let allTextContentHeight = 0; //所有文字绘制完成后的内容高度
      for (let a = 0; a < chr.length; a++) {
        if (
          this.data.ctx.measureText(temp).width < w &&
          this.data.ctx.measureText(temp + chr[a]).width <= w
        ) {
          temp += chr[a];
        } else {
          row.push(temp);
          temp = chr[a];
        }
      }
      row.push(temp);
      console.log(temp, "Temp")
      for (let b = 0; b < row.length; b++) {
        this.data.ctx.fillText(row[b] + " ", x, y + b * (textHeight + marginBottom)); //每行字体y坐标间隔marginBottom
      }
      allTextContentHeight = allTextContentHeight + (row.length) * textHeight + (row.length - 1) * marginBottom
      return allTextContentHeight
    },
    // 根据评分值 来计算评分需要显示对应的图片  return 图片地址
    computeStar(value) {
      if (value != 0) {
        let obj = {
          one: '/img/star_0-5.jpg',
          two: '/img/star_1.jpg',
          three: '/img/star_1-5.jpg',
          four: '/img/star_2.jpg',
          five: '/img/star_2-5.jpg',
          six: '/img/star_3.jpg',
          seven: '/img/star_3-5.jpg',
          eight: '/img/star_4.jpg',
          nine: '/img/star_4-5.jpg',
          ten: '/img/star_5.jpg'
        }
        let starKey = 'one'
        if (value <= 0.5) {
          starKey = 'one'
        } else if (value <= 1) {
          starKey = 'two'
        } else if (value <= 1.5) {
          starKey = "three"
        } else if (value <= 2) {
          starKey = "four"
        } else if (value <= 2.5) {
          starKey = "five"
        } else if (value <= 3) {
          starKey = "six"
        } else if (value <= 3.5) {
          starKey = "seven"
        } else if (value <= 4) {
          starKey = "eight"
        } else if (value <= 4.5) {
          starKey = "nine"
        } else if (value <= 5) {
          starKey = "ten"
        }
        return obj[starKey]

      }
    }
  },
  lifetimes: {
    async attached() {
      // console.log(1)
    }
  },
  observers: {
    renderCanvas: function(val) {
      // 注意: 总体绘制规则 从左到右 从上到下进行计算坐标值
      console.log(val, "val")
      if (val) {
        this.setData({
          footerImgHeight: this.baseCanvasImgHeight(1926, 267, 414) + 20
        }, async () => {
          await this.getMyCanvasAndCtx();
          // 0-0: canvas动态设置底部图片的高度---先设置高度然后在获取canvas实例等操作
          console.log(this.data, "this.data");
          return;
          wx.showLoading({
            title: '生成中...',
          })
          // 0- 绘制背景颜色
          this.data.ctx.beginPath();
          this.data.ctx.fillStyle = "rgba(255, 255, 255)";
          // 1-绘制搜索条件区域框（）原图（1926 * 615)
          await this.drawImageMethod({
            imgUrl: "/img/top-1.png",
            x: 0,
            y: 0,
            imgWidth: 414,
            imgHeight: this.baseCanvasImgHeight(1926, 615, 414)
          })
          // 2- 绘制灰色下划线
          // this.data.ctx.beginPath();
          // this.data.ctx.moveTo(0, this.baseCanvasImgHeight(1926, 615, 414) + 2);
          // this.data.ctx.lineTo(this.baseCanvasImgHeight(1926, 615, 414) + 2, 414); //创建到达位置 
          // this.data.ctx.lineWidth = 2;
          // this.data.ctx.strokeStyle = "#F6F6F6FF";
          // this.data.ctx.stroke();
          // 3- 绘制列表页列表项
          let contentStartX = 10;
          let contentStartY = this.baseCanvasImgHeight(1926, 615, 414) + 1 + 14;
          //3-1绘制门店图片
          await this.drawRoundImage({
            imgUrl: "https://z3.ax1x.com/2021/09/17/4KbRAJ.jpg",
            x: contentStartX,
            y: contentStartY,
            imgWidth: 87,
            imgHeight: this.baseCanvasImgHeight(486, 486, 87),
            bg_r: 3
          })
          // 3-2 绘制店铺名字(超过最大宽度出现省略号)
          this.dealWords({
            font: '600 14px/19px PingFangSC-Semibold, PingFang SC',
            color: '#222222',
            x: contentStartX + 87 + 10,
            y: contentStartY,
            word: 'YESBABY智慧の美颜连锁 (园区凤凰就法拉克附近）',
            maxWidth: 255,
            maxLine: 1,
            lineHeight: 18,
          })
          // 3-3绘制 是否预约---标志
          this.roundRect({
            x: contentStartX + 87 + 10 + 255 + 12,
            y: contentStartY + 4,
            w: 31,
            h: 19,
            r: 2,
            color: "#ffeee9"
          })
          // 3-4 绘制预约字
          this.data.ctx.font = "400 12px/12px PingFangSC-Semibold, PingFang SC"
          this.data.ctx.fillStyle = '#fe6633'
          this.data.ctx.fillText('预约', contentStartX + 87 + 10 + 255 + 12 + (31 - this.computeTextWidth('预约')) / 2, contentStartY + 4 + 12 + 2)
          // 3-5 绘制---星星
          let fromAdminStar = 2.6; //模拟来着后端数据
          let marginTop = 8
          let starStartX = contentStartX + 87 + 10; //星星开始x坐标
          await this.drawImageMethod({
            imgUrl: this.computeStar(fromAdminStar), // 原图（380*60）
            x: starStartX,
            y: contentStartY + 19 + marginTop + 2, // 2微调
            imgWidth: 70,
            imgHeight: this.baseCanvasImgHeight(380, 60, 70)
          })
          // 3-6 绘制星星下的评分
          var marginLeft = 10
          this.data.ctx.font = "400 12px/17px PingFangSC-Semibold, PingFang SC";
          this.data.ctx.fillStyle = '#FF6633FF';
          this.data.ctx.textBaseline = "middle";
          this.data.ctx.fillText(fromAdminStar, starStartX + 5 * 13 + marginLeft, contentStartY + 19 + marginTop + 17 / 2);
          // 3-7 绘制好评总数提示信息
          var marginLeft = 10;
          var haoping = "42条好评";
          this.data.ctx.font = "400 12px/17px PingFangSC-Semibold, PingFang SC";
          this.data.ctx.fillStyle = '#222222';
          this.data.ctx.textBaseline = "middle";
          this.data.ctx.fillText(haoping, starStartX + 5 * 13 + 10 + marginLeft + (fromAdminStar ? this.computeTextWidth(fromAdminStar) : 0), contentStartY + 19 + marginTop + 17 / 2);
          // 3-8 绘制人均价格提示信息
          var marginLeft = 10
          var danjiaAndPeople = '￥241/人';
          this.data.ctx.font = "400 12px/17px PingFangSC-Semibold, PingFang SC";
          this.data.ctx.fillStyle = '#222222';
          this.data.ctx.textBaseline = "middle";
          this.data.ctx.fillText(danjiaAndPeople, starStartX + 5 * 13 + 10 + 10 + marginLeft + this.computeTextWidth(fromAdminStar) + this.computeTextWidth(haoping), contentStartY + 19 + marginTop + 17 / 2);
          // 3-9 绘制地址
          var marginTop39 = 10
          this.data.ctx.font = "400 12px/16px PingFangSC-Semibold, PingFang SC";
          this.data.ctx.fillStyle = '#777777FF';
          this.data.ctx.textBaseline = "middle";
          this.data.ctx.fillText("龙湖狮山天街商场", starStartX, contentStartY + 19 + 10 + 17 + marginTop39);
          // 3-10 绘制 皮肤管理
          var marginLeft310 = 10
          this.data.ctx.font = "400 12px/16px PingFangSC-Semibold, PingFang SC";
          this.data.ctx.fillStyle = '#777777FF';
          this.data.ctx.textBaseline = "middle";
          this.data.ctx.fillText("皮肤管理", starStartX + this.computeTextWidth('龙湖狮山天街商场') + marginLeft310, contentStartY + 19 + 10 + 17 + marginTop39);
          // 3- 11 绘制评论标签
          var commentContentHeight;;
          (() => {
            var temp = ['不满意重做', '不满意重做', '不满意重做'];
            let startX = starStartX;
            let initStartX = starStartX;
            let startY = contentStartY + 19 + 10 + 17 + marginTop39 + 12;
            for (let i = 0; i < temp.length; i++) {
              let item = temp[i]
              let coordinates = this.drawMultipleBaseBackRect({
                startX: startX,
                startY: startY,
                word: item,
                wordFont: "400 12px/14px PingFangSC-Regular, PingFang SC",
                wordColor: "#777777FF",
                fillColor: '#F7F5F5FF',
                maxWidth: 400,
                initStartX,
                lineHeight: 14,
                height: 12,
                padding: [4, 4, 4, 4], // 上 右 下 左
              })
              startX = coordinates[2];
              startY = coordinates[3];
              commentContentHeight = coordinates[4]
              console.log(coordinates, "coordinates")
            }
          })();
          // 3-12 绘制评论信息
          this.data.ctx.font = "400 12px/16px PingFangSC-Semibold, PingFang SC";
          this.data.ctx.fillStyle = '#777777FF';
          this.data.ctx.textBaseline = "middle";
          this.data.ctx.fillText("“这家美甲真是没话说,太好看了”", starStartX, contentStartY + 19 + 10 + 17 + marginTop39 + 12 + 14 + commentContentHeight);
          console.log(contentStartY + 19 + 10 + 17 + marginTop39 + 12 + 14 + commentContentHeight)
          // 3-13 绘制团购信息
          var that = this;
          var tuanListHeight;
          var tuanStartY = contentStartY + 19 + 10 + 17 + marginTop39 + 12 + 14 + commentContentHeight + 10 + 6;; //自调用函数（加入闭包）加入（异步处理结果 返回值）
          var res = (() => {
            //私有数据
            return function () {
              return new Promise(async (resolve) => {
                // 渲染两个团购信息
                let rowHeight = 16;
                let rowMarginBottom = 6;
                for (let i = 0; i < 2; i++) {
                  let startX = starStartX;
                  // 3-13- 0绘制团图片信息
                  await that.drawImageMethod({
                    imgUrl: "/img/tuan.png", // (原图84 * 84)
                    x: startX,
                    y: tuanStartY + i * rowHeight + (i > 0 ? rowMarginBottom : 0),
                    imgWidth: 17,
                    imgHeight: that.baseCanvasImgHeight(84, 84, 17)
                  });
                  // let initStartX = starStartX;
                  // this.drawMultipleBaseBackRect({
                  //   startX: startX,
                  //   startY: tuanStartY + i * rowHeight + (i > 0 ? rowMarginBottom : 0),
                  //   word: "团",
                  //   wordFont: "400 12px/16px PingFangSC-Regular, PingFang SC",
                  //   wordColor: "#fe875f",
                  //   fillColor: '#ffeee9',
                  //   maxWidth: 200,
                  //   initStartX,
                  //   lineHeight: 16,
                  //   height: 12,
                  //   padding: [3, 4, 3, 4], // 上 右 下 左
                  // })
                  // 3-13-1 绘制团后的文字信息
                  const tuanWidth = 17
                  let fromtuanWordY = (tuanStartY - that.baseCanvasImgHeight(84, 84, 17)) + i * rowHeight + (i > 0 ? rowMarginBottom : 0) + 3; // 3是团子中的padding-top
                  that.data.ctx.textBaseline = "top"
                  that.dealWords({
                    font: '400 12px/16px PingFangSC-Semibold, PingFang SC',
                    color: '#111111',
                    x: startX + tuanWidth + 8,
                    y: fromtuanWordY,
                    word: '[深层清洁] 98元 【当家人气】螺旋大气泡毛孔地方撒发的撒范德萨发',
                    maxWidth: 290,
                    maxLine: 1,
                    lineHeight: 16,
                  })
                }
                resolve(rowHeight * 2 + (2 - 1) * rowMarginBottom)
              })
            }
          })();
          tuanListHeight = await res();
          // 3 -14绘制下方灰色隔断层
          var huiseJuxingMarginTop = 14;
          this.data.ctx.fillStyle = "#f6f6f6";
          this.data.ctx.rect(0, tuanStartY + tuanListHeight + huiseJuxingMarginTop, 414, 13);
          this.data.ctx.fill();
          // 列表搜索页面绘制完毕
          // 4-1 绘制详情窗口
          let xiangqingContentY = tuanStartY + tuanListHeight + huiseJuxingMarginTop + 13;
          await this.drawImageMethod({
            imgUrl: "/img/top-2.png", // (原图1926 * 402)
            x: 0,
            y: xiangqingContentY,
            imgWidth: 414,
            imgHeight: this.baseCanvasImgHeight(1926, 402, 414)
          });
          // 4-2 绘制详情页面轮播图
          let xiangqingChuangkoHeight = this.baseCanvasImgHeight(1926, 402, 414); //详情窗口高度
          ;
          var res = (() => {
            let swiperArry = ['https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg', 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg', 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'];
            return () => {
              return new Promise(async (resolve) => {
                for (let i = 0; i < swiperArry.length; i++) {
                  await this.drawRoundImage({
                    imgUrl: swiperArry[i], // (原图980 * 500)
                    x: i == 0 ? -4 : i == (swiperArry.length - 1) ? 0 + 380 + (14 + 5 + 5 - 4) + 2 : 0 + (14 + 5 - 4),
                    y: xiangqingContentY + xiangqingChuangkoHeight,
                    imgWidth: i == 0 || i == (swiperArry.length - 1) ? 14 : 380,
                    imgHeight: this.baseCanvasImgHeight(980, 500, 380),
                    bg_r: i == 0 || i == (swiperArry.length - 1) ? 3 : 0,
                    cutImgFlag: i == 0 || i == (swiperArry.length - 1),
                    cutObjParams: {
                      sx: 380 - 14,
                      sy: 0,
                      swidth: 14, //	可选。被剪切图像的宽度。
                      sheight: this.baseCanvasImgHeight(980, 500, 380), //可选。被剪切图像的高度。
                      width: 14, //可选。要使用的图像的宽度。（伸展或缩小图像）
                      height: this.baseCanvasImgHeight(980, 500, 380) //可选。要使用的图像的高度。（伸展或缩小图像）
                    }
                  })
                  // 4-2-1 绘制轮播图上的数字信息
                  await this.roundRect({
                    x: (414 - 35) - 50 - 20, // 距离右边的距离  50，20微调
                    y: xiangqingContentY + xiangqingChuangkoHeight + (this.baseCanvasImgHeight(980, 500, 380) - 15 - 23),
                    w: 80,
                    h: 23,
                    r: 12,
                    color: 'rgba(86, 90, 73, 0.5)'
                  })
                  // 4-2-2 绘制轮播图上文字信息
                  this.data.ctx.font = "400 10px/14px  PingFangSC-Regular, PingFang SC"
                  this.data.ctx.fillStyle = "#fff";
                  this.data.ctx.textBaseline = "top"
                  this.data.ctx.fillText("1264", (414 - 35) - 50 - 20 + (80 - 8 - this.computeTextWidth("1264")), xiangqingContentY + xiangqingChuangkoHeight + (this.baseCanvasImgHeight(980, 500, 380) - 15 - 23) + 8) // 8--padding-top
                }
                resolve(this.baseCanvasImgHeight(980, 500, 380)); // this.baseCanvasImgHeight(980, 500, 380)轮播图的图片 高度
              })
            }
          })();
          let bannerHeight = await res();
          // 4-3 绘制轮播图下的门店名字
          let xiangqingContetnX = 14
          let xiangqingShopNameTop = 8; //详情页店铺名字距离轮播图的margin值
          const allTextContentHeight = this.drawtext({
            t: "YESBABY智慧の美颜连锁发送到发ID顺",
            x: xiangqingContetnX,
            y: xiangqingContentY + xiangqingChuangkoHeight + bannerHeight + xiangqingShopNameTop,
            w: 350,
            font: '600 18px/26px PingFangSC-Semibold, PingFang SC',
            color: '#222222FF',
            textHeight: 18,
            marginBottom: 10
          });
          // 4-4 开始绘制详情页 店铺名下的星星
          console.log(allTextContentHeight, "allTextContentHeight")
          let xiangqingstartContentY = xiangqingContentY + xiangqingChuangkoHeight + bannerHeight + xiangqingShopNameTop + allTextContentHeight // 详情店铺名字下的星星的开始y坐标
          var fromAdminStar2 = 4.1;
          await this.drawImageMethod({
            imgUrl: this.computeStar(fromAdminStar2), // 原图（380*60）
            x: xiangqingContetnX,
            y: xiangqingstartContentY + 7 + 2, // 2微调
            imgWidth: 70,
            imgHeight: this.baseCanvasImgHeight(380, 60, 70)
          })
          // 4-5 绘制 评分值
          var pingfenValueX = xiangqingContetnX + 5 * 13 + 10
          var pingfenValueY = xiangqingstartContentY + 7 + 2; // 2--paddingTop
          this.data.ctx.font = "500 12px/17px PingFangSC-Medium, PingFang SC";
          this.data.ctx.fillStyle = "#FF6633";
          this.data.ctx.fillText(fromAdminStar2, pingfenValueX, pingfenValueY)
          // 4-6 绘制详情字体
          this.data.ctx.font = "400 12px/17px PingFangSC-Medium, PingFang SC";
          this.data.ctx.fillStyle = "#222222";
          this.data.ctx.fillText("详情", pingfenValueX + this.computeTextWidth(fromAdminStar2) + 4, pingfenValueY)
          // 4-7 绘制详情后的右箭头
          await this.drawImageMethod({
            imgUrl: '/img/arrow.png', // 原图（48*48）
            x: pingfenValueX + this.computeTextWidth(fromAdminStar2) + 4 + this.computeTextWidth('详情'),
            y: pingfenValueY, // 7 ---marginTop
            imgWidth: 10,
            imgHeight: this.baseCanvasImgHeight(48, 48, 10)
          })
          // 4-8 绘制 条数
          this.data.ctx.font = "400 12px/17px PingFangSC-Medium, PingFang SC";
          this.data.ctx.fillStyle = "#222222FF";
          this.data.ctx.fillText('42条', pingfenValueX + this.computeTextWidth(fromAdminStar2) + 4 + this.computeTextWidth('详情') + 10 + 10, pingfenValueY)
          // 4-9 绘制 一人单价
          this.data.ctx.font = "400 12px/17px PingFangSC-Medium, PingFang SC";
          this.data.ctx.fillStyle = "#222222FF";
          this.data.ctx.fillText('￥241/人', pingfenValueX + this.computeTextWidth(fromAdminStar2) + 4 + this.computeTextWidth('详情') + 10 + 10 + this.computeTextWidth("42条") + 3, pingfenValueY);
          // 4-10 绘制下一行 效果值
          var xiaoguoY = pingfenValueY + this.baseCanvasImgHeight(28, 28, 13) + 4; // 4--marginTop
          this.data.ctx.font = "400 12px/17px PingFangSC-Medium, PingFang SC";
          this.data.ctx.fillStyle = "#222222";
          this.data.ctx.fillText("效果:4.0  环境:3.9  服务:4.0", xiangqingContetnX, xiaoguoY);
          // 4-11 绘制 效果值下的 下划线
          var xiaoguoLineY = pingfenValueY + this.baseCanvasImgHeight(28, 28, 13) + 4 + 17 + 10; //17是 效果的文字高度 10--marginTop
          await this.drawImageMethod({
            imgUrl: '/img/line.png', // 原图（1791*3）
            x: xiangqingContetnX,
            y: xiaoguoLineY,
            imgWidth: 414,
            imgHeight: this.baseCanvasImgHeight(1791, 3, 414)
          })
          // 5 - 绘制下一行营业信息
          var yingyexinxiY = xiaoguoLineY + this.baseCanvasImgHeight(1791, 3, 414) + 10; // 10--marginTop
          this.data.ctx.font = "400 12px/17px PingFangSC-Medium, PingFang SC";
          this.data.ctx.fillStyle = "#111111";
          this.data.ctx.fillText("营业中  周一至周五 12:00-21:00  周六，周日 10:00-19:00", xiangqingContetnX, yingyexinxiY);
          // 5-1 绘制营业信息下的
          var currentContentHeight; // 寄存柜 免费wifi tip提示tag
          (() => {
            var temp = ['寄存柜', '免费wifi', '充电宝', '沙发座', '充电宝'];
            let startX = xiangqingContetnX;
            let initStartX = xiangqingContetnX;
            let startY = yingyexinxiY + 17 + 7; // 7--marginTop
            for (let i = 0; i < temp.length; i++) {
              let item = temp[i]
              let coordinates = this.drawMultipleBaseBackRect({
                startX: startX,
                startY: startY,
                word: item,
                wordFont: "400 12px/14px PingFangSC-Regular, PingFang SC",
                wordColor: "#111111",
                fillColor: '#F6F6F6FF',
                maxWidth: 400,
                initStartX,
                lineHeight: 14,
                height: 12,
                padding: [4, 4, 4, 4], // 上 右 下 左
              })
              startX = coordinates[2];
              startY = coordinates[3];
              currentContentHeight = coordinates[4];
            }
          })();
          // 5-2 右箭头
          await this.drawImageMethod({
            imgUrl: '/img/arrow.png', // 原图（48*48）
            x: (414 - 15 - 20),
            y: yingyexinxiY + 17,
            imgWidth: 10,
            imgHeight: this.baseCanvasImgHeight(48, 48, 10)
          })
          // 5-3 绘制下划线
          var rowHeightY = currentContentHeight + yingyexinxiY + 17 + 7 + 8 // 7,8---marginTop
          await this.drawImageMethod({
            imgUrl: '/img/line.png', // 原图（1791*3）
            x: 0,
            y: rowHeightY,
            imgWidth: 414,
            imgHeight: this.baseCanvasImgHeight(1791, 3, 414)
          })
          // 5-3 绘制地址信息
          var shopAdressY = rowHeightY + 9 // 9--marginTop
          this.data.ctx.font = "400 12px/17px PingFangSC-Medium, PingFang SC";
          this.data.ctx.fillStyle = "#111111";
          this.data.ctx.fillText('苏州工业园区星都街80号3403室', xiangqingContetnX, shopAdressY);
          // 5-4 绘制 地址详细信息
          this.data.ctx.font = "400 12px/17px PingFangSC-Medium, PingFang SC";
          this.data.ctx.fillStyle = "#777777";
          this.data.ctx.fillText('距地铁1号线星海广场地铁站4号口490m', xiangqingContetnX, shopAdressY + 17 + 1);
          // 5-5 绘制小汽车图片
          await this.drawImageMethod({
            imgUrl: '/img/car-phone.png', // 330*150）
            x: (414 - 20 - 71), // 20 -marginRight
            y: shopAdressY,
            imgWidth: 71,
            imgHeight: this.baseCanvasImgHeight(330, 150, 71)
          })
          // 5-6 绘制灰色阴影
          this.data.ctx.fillStyle = "#f6f6f6";
          this.data.ctx.rect(0, shopAdressY + 71, 414, 13);
          this.data.ctx.fill();
          // 6-1 绘制团购列表信息
          var tuangouY = shopAdressY + 71;
          await this.drawImageMethod({
            imgUrl: '/img/top-3.png', // (1926*351
            x: 0, // 20 -marginRight
            y: tuangouY,
            imgWidth: 414,
            imgHeight: this.baseCanvasImgHeight(1926, 351, 414)
          })
          //6-2 绘制团购下的搜索title
          var tuangouTitleHeight;;
          (() => {
            let textArr = ['热门', '工作日特惠', '皮肤管理', '塑身塑性', 'spa按摩哈哈'];
            let activeIndex = 2; //当前激活title
            let startX = xiangqingContetnX;
            let initStartX = xiangqingContetnX;
            let startY = shopAdressY + 71 + this.baseCanvasImgHeight(1926, 351, 414) + 8; // 8--marginTop
            for (let i = 0; i < textArr.length; i++) {
              this.data.ctx.font = '400 13px/18px PingFangSC-Regular, PingFang SC';
              let item = textArr[i];
              let width = this.computeTextWidth(item);
              let backgroundColor = i == activeIndex ? '#FFEEE9FF' : '#F3F3F3';
              let textColor = i == activeIndex ? '#FF6633' : '#131313';
              let coordinates = this.drawMultipleArcTo({
                startX,
                startY,
                w: width,
                h: 13,
                color: backgroundColor,
                maxWidth: 4141, // 一行展示不换行
                initStartX,
              });
              this.data.ctx.fillStyle = textColor;
              this.data.ctx.textBaseline = 'middle';
              this.data.ctx.fillText(item, coordinates[0], coordinates[1])
              startX = coordinates[2];
              startY = coordinates[3];
              tuangouTitleHeight = 27
            }
          })();
          // 6-3 绘制门店列表信息
          var shopListInfoInitY = tuangouTitleHeight + shopAdressY + 71 + this.baseCanvasImgHeight(1926, 351, 414) + 8 + 9; //8, 9 marginTop
          var shopListInfoInitX = xiangqingContetnX;
          var res = (() => {
            return () => {
              return new Promise(async (resolve) => {
                for (let i = 0; i < this.data.shopData.shopList.length; i++) {
                  //6-3-1 绘制左边图片 信息
                  await this.drawRoundImage({
                    imgUrl: "https://z3.ax1x.com/2021/09/17/4KbRAJ.jpg", // 原图（468 * 468）
                    x: shopListInfoInitX,
                    y: shopListInfoInitY + (this.baseCanvasImgHeight(468, 468, 64) + 14) * i + (i == 0 ? 0 : i * 10), // 10 margin-bottom
                    imgWidth: 64,
                    imgHeight: this.baseCanvasImgHeight(468, 468, 64),
                    bg_r: 2
                  });
                  //6-3-2 绘制左边文字信息
                  this.dealWords({
                    font: '400 13px/18px PingFangSC-Semibold, PingFang SC',
                    color: '#111111',
                    x: shopListInfoInitX + 64 + 9, // 9--marginLeft
                    y: shopListInfoInitY + (this.baseCanvasImgHeight(468, 468, 64) + 14) * i + (i == 0 ? 0 : i * 10) - 10, // 10 margin-bottom, -10微调为了和图片对齐
                    word: '[深层清洁] 【当家人气】螺旋大气泡毛的叫法是甲方',
                    maxWidth: 245,
                    maxLine: 1,
                    lineHeight: 18,
                  })
                  // 6-3-3 绘制下方内容
                  this.dealWords({
                    font: '400 11px/15px PingFangSC-Semibold, PingFang SC',
                    color: '#777777FF',
                    x: shopListInfoInitX + 64 + 9, // 9--marginLeft
                    y: 18 + shopListInfoInitY + (this.baseCanvasImgHeight(468, 468, 64) + 14) * i + (i == 0 ? 0 : i * 10) - 10 + 4, // 10 margin-bottom, -10微调为了和图片对齐
                    word: '补水保湿 | 深层清洁',
                    maxWidth: 245,
                    maxLine: 1,
                    lineHeight: 15,
                  })
                  // 6-3-4 绘制金额
                  this.dealWords({
                    font: '500 15px/21px PingFangSC-Semibold, PingFang SC',
                    color: '#FF6633',
                    x: shopListInfoInitX + 64 + 9, // 9--marginLeft
                    y: 15 + 18 + shopListInfoInitY + (this.baseCanvasImgHeight(468, 468, 64) + 14) * i + (i == 0 ? 0 : i * 10) - 10 + 4 + 5,
                    word: '￥98',
                    maxWidth: 245,
                    maxLine: 1,
                    lineHeight: 21,
                  })
                  this.dealWords({
                    font: '500 13px/21px PingFangSC-Semibold, PingFang SC',
                    color: '#111111',
                    x: shopListInfoInitX + 64 + 9 + this.computeTextWidth('￥98') + 3,
                    y: 15 + 18 + shopListInfoInitY + (this.baseCanvasImgHeight(468, 468, 64) + 14) * i + (i == 0 ? 0 : i * 10) - 10 + 4 + 5 + 3, // 3-marginTop 微调距离
                    word: '￥76.44',
                    maxWidth: 245,
                    maxLine: 1,
                    lineHeight: 18,
                  })
                  //6-3-5 绘制价格说明信息---使用时间
                  this.dealWords({
                    font: '400 10px/14px PingFangSC-Semibold, PingFang SC',
                    color: '#777777FF',
                    x: shopListInfoInitX + 64 + 9,
                    y: 21 + 15 + 18 + shopListInfoInitY + (this.baseCanvasImgHeight(468, 468, 64) + 14) * i + (i == 0 ? 0 : i * 10) - 10 + 4 + 5 + 3, // 3-marginTop 微调距离
                    word: '工作日价限周一至周五使用',
                    maxWidth: 245,
                    maxLine: 1,
                    lineHeight: 14,
                  })
                  // 6-3-6 绘制最右边的购买信息
                  var goumaiBackY = 18 + shopListInfoInitY + (this.baseCanvasImgHeight(468, 468, 64) + 14) * i + (i == 0 ? 0 : i * 10) - 10 + 4
                  this.roundRect({
                    x: (414 - this.computeTextWidth("购买") - 50), // 50---微调距离,
                    y: goumaiBackY,
                    w: 50,
                    h: 25,
                    r: 12,
                    color: '#FF6633FF'
                  })
                  this.data.ctx.font = "400 13px/18px PingFangSC-Regular, PingFang SC"
                  this.data.ctx.fillStyle = "#fff";
                  this.data.ctx.fillText("购买", (414 - this.computeTextWidth("购买") - 50) + (50 - this.computeTextWidth("购买")) / 2 + 5, goumaiBackY + 3 + 18 / 2 + 2) // 5是微调px值 12 padding-left 3 padding-top  2微调值
                  // 6-3-7 绘制购买按钮信息下的 半年消费信息
                  if (i === 2) {
                    this.data.ctx.font = "400 11px/15px PingFangSC-Regular, PingFang SC"
                    this.data.ctx.fillStyle = "#808080FF";
                    this.data.ctx.fillText("半年消费75", (414 - this.computeTextWidth("购买") - 50), goumaiBackY + 25 + 10) // 25按钮的总高度 10
                  }
                }
                resolve(21 + 15 + 18 + shopListInfoInitY + (this.baseCanvasImgHeight(468, 468, 64) + 14) * this.data.shopData.shopList.length + this.data.shopData.shopList.length * 10)
              })
            }

          })();
          const shopListContentHeight = await res();
          // 7-1 绘制底部图片
          await this.drawImageMethod({
            imgUrl: '/img/top-4.png', // (1926*267)
            x: 0, //
            y: shopListContentHeight - 50,
            imgWidth: 414,
            imgHeight: this.baseCanvasImgHeight(1926, 267, 414)
          })
          wx.canvasToTempFilePath({
            canvas: this.data.canvas, //现在的写法
            success(res) {
              console.log(res.tempFilePath, 'res.tempFilePath')
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success(res) {
                  console.log(res);
                  wx.showToast({
                    title: '保存到相册成功'
                  })
                },
                fail() {
                  wx.showToast({
                    title: '保存到相册失败'
                  })
                }
              })
            },
            fail() {
              wx.showToast({
                title: '生成失败',
                success() {
                  wx.hideLoading()
                }
              })
            }
          })
        })
      }
    }
  }
})